<template>
  <div class="v-header bg-color-white">
    <p class="title lf font16">{{ title }}</p>
    <div class="rf">
      <!--<v-slider class="lf" @on-change="changeSlider"></v-slider>-->
      <!--<v-dropdown class="lf" dropdownMenuClass="header-dropdown" :width="88" :height="30" :options="CalculateMethods" value="met1" @on-change="changeDropdown"></v-dropdown>-->
      <!--<v-button class="lf" btnText="" :width="30" @on-click="refresh">-->
        <!--<i slot="iconBefore" class="iconfont icon-refresh"></i>-->
      <!--</v-button>-->
      <v-button v-if="showDownloadBtn" class="lf" btnText="" :width="30" @on-click="download">
        <i slot="iconBefore" class="iconfont icon-download"></i>
      </v-button>
      <div class="save-btn lf">
        <el-popover
          ref="popover5"
          width="240"
          @hide="reset('ruleForm')"
          v-model="showPopup">
          <div class="showPopupDiv">
            <!--<span>名称</span>：-->
            <!--<el-input size="mini" v-model="pageHeaderName" style="width: 160px;"></el-input>-->
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px">
              <el-form-item label="名称:" prop="pageHeaderName">
                <el-input size="mini" v-model="ruleForm.pageHeaderName"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="showPopupDiv">
            <span>是否置顶</span>：
            <el-radio v-model="isTop" label="yes">是</el-radio>
            <el-radio v-model="isTop" label="no">否</el-radio>
          </div>
          <div style="text-align: right">
            <el-button size="mini" @click="reset('ruleForm')">取消</el-button>
            <el-button :disabled="active" type="success" size="mini" @click="sure('ruleForm')">确定</el-button>
          </div>
        </el-popover>
        <v-button v-if="saveShow" class="save" v-popover:popover5 btnText="保存" :width="60" type="success"></v-button>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import VSlider from '../VSlider/VSlider'
  import VDropdown from '../select/VDropdown'
  import VButton from '../VButton/VButton'
  import Msg from '../../assets/js/msg'

  export default {
    props: {
      // 标题
      title: {
        type: String
      },
      // 是否显示下载图标，默认显示
      showDownloadBtn: {
        type: Boolean,
        default: true
      },
      // 需下载的数据
      dataMsg: Array,
      // 下载保存的文件名
      fileName: {
        type: String,
        default: 'file'
      },
      saveShow: {
        type: Boolean,
        default: true
      },
      isDisabled: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      isDisabled (val) {
        this.active = val
      }
    },
    components: {
      VSlider,
      VDropdown,
      VButton
    },
    data () {
      return {
        CalculateMethods: [
          {
            value: 'met1',
            label: '精确计算'
          }, {
            value: 'met2',
            label: '近似计算'
          }
        ],
        showPopup: false,
        ruleForm: {
          pageHeaderName: ''
        },
        rules: {
          pageHeaderName: [
            {required: true, message: '请输入名称', trigger: 'blur'},
            {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
          ]
        },
        isTop: 'yes',
        active: false
      }
    },
    methods: {
      // changeSlider (val) {
      //   this.$emit('on-change-slider', val)
      // },
      // changeDropdown (item) {
      //   this.$emit('on-change-dropdown', item)
      // },
      // refresh () {
      //   this.$emit('on-refresh')
      // },
      download () {
        if (this.dataMsg.length === 0) {
          Msg.alert('暂无下载数据！')
          return false
        }
        this.JSONToCSVConvertor(this.dataMsg, true)
      },
      reset (formName) {
        this.showPopup = false
        this.$refs[formName].resetFields()
        this.isTop = 'yes'
      },
      sure (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let dataValue = {
              pageHeaderName: this.ruleForm.pageHeaderName,
              isTop: this.isTop
            }
            this.$emit('on-save', dataValue)
            this.$refs[formName].resetFields()
            this.showPopup = false
          } else {
            return false
          }
        })
      },
      msieversion () {
        let ua = window.navigator.userAgent
        let msie = ua.indexOf('MSIE ')
        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv:11\./)) {
          return true
        } else {
          return false
        }
      },
      JSONToCSVConvertor (JSONData, ShowLabel) {
        let fileName = this.fileName
        let arrData = typeof JSONData !== 'object' ? JSON.parse(JSONData) : JSONData
        let CSV = ''
        if (ShowLabel) {
          let row = ''
          for (let index in arrData[0]) {
            row += index + ','
          }
          row = row.slice(0, -1)
          CSV += row + '\r\n'
        }
        for (let i = 0; i < arrData.length; i++) {
          let row = ''
          for (let index in arrData[i]) {
            let arrValue = arrData[i][index] == null ? '' : '="' + arrData[i][index] + '"'
            row += arrValue + ','
          }
          row.slice(0, row.length - 1)
          CSV += row + '\r\n'
        }
        if (CSV === '') {
          Msg.alert('无效数据！')
          return
        }
        if (this.msieversion()) {
          let IEwindow = window.open()
          IEwindow.document.write('sep=,\r\n' + CSV)
          IEwindow.document.close()
          IEwindow.document.execCommand('SaveAs', true, fileName + '.csv')
          IEwindow.close()
        } else {
          let uri = 'data:application/csv;charset=utf-8,\uFEFF' + encodeURI(CSV)
          let link = document.createElement('a')
          link.href = uri
          link.style = 'visibility:hidden'
          link.download = fileName + '.csv'
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .header-dropdown
    .el-dropdown-menu__item
      font-size 12px
  .v-header
    width 100%
    height 56px
    padding 0 20px
    position relative
    z-index 99
    .title
      line-height 56px
      color #5A5E66
      font-weight bold
    & > .rf
      height 100% /*.v-slider
        width 145px
        margin-top 8px
        margin-right 10px
      .v-dropdown, */
      .v-button
        margin-top 13px
        margin-left 10px
        button
          border-radius 4px
          span
            font-size 12px
      .save-btn
        position relative
        .save-popup
          position absolute
          top 45px
          right 0
          width 240px
          height 180px
          border-radius 4px
          background #fff
          box-shadow 0 2px 12px 0 rgba(0, 0, 0, .1)
          border 1px solid #ebeef5
          padding 10px
        .popup-arrow
          width 1px
          height 1px
          border-bottom 6px solid #ebeef5
  .showPopupDiv
    margin 15px 0 20px
</style>
